<template>
    <div class="bank-product-detail-container">
        <div class="bank-product-detail-text">产品详情:</div>
        <el-form :model="update_form_param" :rules="update_form_rules" ref="update_form" class="ms-content">
            <table style="border-collapse: collapse; margin-bottom: 45px; margin-top: 20px" border="1" cellpadding="0" cellspacing="0">
                <tr>
                    <td style="width: 550px; padding: 10px">
                        <el-form-item style="margin-bottom: 0" prop="id" label="产品编号">
                            <el-input
                                :disabled="true"
                                maxlength="10"
                                placeholder="自动生成"
                                v-model="pid"
                                :style="{'maxWidth': '450px'}">
                            </el-input>
                        </el-form-item>
                    </td>
                    <td style="width: 550px; padding: 10px">
                        <el-form-item style="margin-bottom: 0" prop="title" label="产品标题">
                            <el-input
                                :disabled="disableForm"
                                maxlength="10"
                                v-model="update_form_param.title"
                                :style="{'maxWidth': '450px'}">
                            </el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td style="width: 550px; padding: 10px">
                        <el-form-item style="margin-bottom: 0" prop="form" label="融资形式">
                            <el-input
                                :disabled="disableForm"
                                maxlength="10"
                                v-model="update_form_param.form"
                                :style="{'maxWidth': '450px'}">
                            </el-input>
                        </el-form-item>
                    </td>
                    <td style="width: 550px; padding: 10px">
                        <el-form-item style="margin-bottom: 0" prop="business" label="行业类别">
                            <el-input
                                :disabled="disableForm"
                                maxlength="10"
                                v-model="update_form_param.business"
                                :style="{'maxWidth': '450px'}">
                            </el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td style="width: 550px; padding: 10px">
                        <el-form-item style="margin-bottom: 0" prop="pool" label="信息池号">
                            <el-input
                                :disabled="disableForm"
                                maxlength="10"
                                v-model="update_form_param.pool"
                                :style="{'maxWidth': '450px'}">
                            </el-input>
                        </el-form-item>
                    </td>
                    <td style="width: 550px; padding: 10px">
                        <el-form-item style="margin-bottom: 0" prop="keyword" label="关键词语">
                            <el-input
                                :disabled="disableForm"
                                maxlength="10"
                                v-model="update_form_param.keyword"
                                :style="{'maxWidth': '450px'}">
                            </el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px">
                        <el-form-item style="margin-bottom: 0" prop="maxCap" label="贷款额度">
                            <el-input
                                :disabled="disableForm"
                                maxlength="10"
                                v-model="update_form_param.maxCap"
                                :style="{'maxWidth': '450px'}">
                            </el-input>
                        </el-form-item>
                    </td>
                    <td style="padding: 10px">
                        <el-form-item style="margin-bottom: 0" prop="maxCap" label="贷款期限">
                            <el-input
                                :disabled="disableForm"
                                maxlength="10"
                                v-model="update_form_param.period"
                                :style="{'maxWidth': '450px'}">
                            </el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px">
                        <el-form-item style="margin-bottom: 0" prop="targetCap" label="贷款利率">
                            <el-input
                                :disabled="disableForm"
                                maxlength="10"
                                v-model="update_form_param.rate"
                                :style="{'maxWidth': '450px'}">
                            </el-input>
                        </el-form-item>
                    </td>
                    <td style="padding: 10px">
                        <el-form-item style="margin-bottom: 0" prop="status" label="审核状态">
                            <el-input
                                :disabled="disableForm"
                                maxlength="10"
                                v-model="status_text"
                                :style="{'maxWidth': '450px'}">
                            </el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px" colspan="2">
                        <el-form-item style="margin-bottom: 0" prop="desc" label="产品简介">
                            <el-input
                                :disabled="disableForm"
                                maxlength="255"
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 4}"
                                placeholder="项目详情"
                                v-model="update_form_param.desc">
                            </el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px" colspan="2">
                        <el-form-item style="margin-bottom: 0" prop="process" label="放贷流程">
                            <el-input
                                :disabled="disableForm"
                                maxlength="255"
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 4}"
                                placeholder="项目详情"
                                v-model="update_form_param.process">
                            </el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px" colspan="2">
                        <el-form-item style="margin-bottom: 0" prop="qualification" label="申请条件">
                            <el-input
                                :disabled="disableForm"
                                maxlength="255"
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 4}"
                                placeholder="项目详情"
                                v-model="update_form_param.qualification">
                            </el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px" colspan="2">
                        <el-form-item style="margin-bottom: 0" prop="note" label="产品备注">
                            <el-input
                                :disabled="disableForm"
                                maxlength="255"
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 4}"
                                placeholder="项目详情"
                                v-model="update_form_param.note">
                            </el-input>
                        </el-form-item>
                    </td>
                </tr>
            </table>
        </el-form>
        <el-button v-if="role=='admin' && update_form_param.status == 0" @click="handlePass" type="success">
            审核通过
        </el-button>
        <el-button v-if="role=='enterprise' && update_form_param.status == 1 && making_order==false" @click="tryToMakeOrder" type="success">
            申请接洽
        </el-button>
        <el-input
            v-if="role=='enterprise' && update_form_param.status == 1 && making_order==true"
            maxlength="128"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4}"
            :style="{'maxWidth': '1100px'}"
            placeholder="申请理由"
            v-model="order_detail">
        </el-input>
        <br/>
        <el-button :style="{'marginTop': '15px'}" v-if="role=='enterprise' && update_form_param.status == 1 && making_order==true" @click="handleMakeOrder" type="success">
            确认申请
        </el-button>
    </div>
</template>

<script>

    import {getOneBankProduct, makeBankProductOrder, passBankProduct} from "../../api/bank-product";
    import {ROLE_KEY} from "../../constants";

    export default {
        name: 'bank-product-detail',
        data() {
            return {
                bid: 0,
                eid: 0,
                pid: 0,
                detail: '',
                role: '',
                making_order: false,
                order_detail: '',
                status_text: '未通过',
                update_form_param: {
                    form: '',
                    business: '',
                    pool: '',
                    title: '',
                    keyword: '',
                    maxCap: 0,
                    period: 0,
                    rate: 0,
                    desc: '',
                    qualification: '',
                    process: '',
                    note: '',
                    status: ''
                },
                form_access: [],
                business_access: [],
                pool_access: [],
                update_form_rules: {
                    // pid: [{ required: true, message: '请输入患者身份证号', trigger: 'blur' }],
                    // form: [{ required: true, message: '请输入患者姓名', trigger: 'blur' }],
                    // business: [{ required: true, message: '请输入患者年龄', trigger: 'blur' }],
                    // pool: [{ required: true, message: '请输入患者性别', trigger: 'blur' }],
                    // desc: [{ required: true, trigger: 'blur' }],
                    // caseDescription: [{ required: true, message: '卿输入诊断结果', trigger: 'blur' }],
                    // solutionDescription: [{ required: true, message: '请输入治疗方案', trigger: 'blur' }],
                },
                disableForm: true,
            }
        },
        methods: {
            tryToMakeOrder() {
                // makeBankProductOrder({bid: this.bid, pid: this.pid, detail: '申请接洽'})
                this.making_order = true
            },
            handleMakeOrder() {
                makeBankProductOrder({bid: this.bid, pid: this.pid, detail: this.order_detail, productName: this.update_form_param.title})
                window.location.reload()
                this.$message.success("申请成功")
            },
            handlePass() {
                passBankProduct({id: this.pid}).then(res => {
                    window.location.reload()
                })
            }
        },
        mounted() {
            this.role = localStorage.getItem(ROLE_KEY)
            let pid = this.$route.query.id
            this.pid = pid
            getOneBankProduct({id: pid}).then(res => {
                this.update_form_param = res.data
                this.bid = res.data.bid
                if (this.update_form_param.status == 1) {
                    this.status_text = '通过'
                } else {
                    this.status_text = '未通过'
                }

            })
            // pubEnterpriseProduct().then(res => {
            //     console.log(res)
            // })
        }
    }
</script>

<style lang="scss" scoped>
    .bank-product-detail {
        &-container {
            margin: 30px;
        }

        &-text {
            font-size: 36px;
            line-height: 46px;
            font-weight: 600;
        }
    }
</style>
